<template>
  <div>
    <div class="store-settings">
      <section v-for="(item, index) in settings" :key="index">
        <div class="setting-item">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <div v-if="item.type === 'avatar'">
              <image :src="item.value" mode="aspectFill" class="avatar-img"/>
              <div class="action-buttons">
                <button @click="chooseImage">上传</button>
              </div>
            </div>
            <div v-else-if="item.type === 'text'">
              <input v-model="item.tempValue" :placeholder="item.placeholder" />
              <div class="action-buttons">
                <button @click="saveEdit(item)">保存</button>
              </div>
            </div>
            <div v-else-if="item.type === 'toggle'">
              <switch @click="enableLottery(index,item)" :checked="item.value" class="switch-checkbox" />
            </div>
            <div v-else-if="item.type === 'button'">
              <button @click="handleButtonClick(item)">{{ item.buttonText }}</button>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 保存按钮 -->
    <button class="save-store-info" @click="saveAllSettings">保存门店信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      settings: [
        { title: '门店头像', type: 'avatar', value: '/path/to/default/avatar.jpg' },
        { title: '门店名称', type: 'text', value: '', placeholder: '请输入门店名称', tempValue: '' },
        { title: '平台(饿了么)', type: 'toggle', value: false,revalue:0, label: '平台开关' },
        { title: '平台(美团外卖)', type: 'toggle', value: false,revalue:0, label: '平台开关' },
        { title: '平台(自定义1)', type: 'toggle', value: false,revalue:0, label: '平台开关' }
      ],
      id: 0,
      storeId: 0,
	  isactiveEleme:0,
	  isactiveMeituan:0,
	  isactiveCount:0
    };
  },
  onLoad(options) {
	  console.log(options)
    this.id = options.status;
    console.log(this.id);
    this.askInitialData(this.id);
  },
  methods: {
    async askInitialData(id) {
      try {
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://zhaoyang.nat300.top/store/find',
            method: 'POST',
            data: {
              id: this.id,
            },
            header: {
              'content-type': 'application/json'
            },
            success: (res) => {
			  console.log(res);
              this.storeId = res.data.id;
              this.settings[0].value = res.data.avatar;
			  this.settings[1].tempValue = res.data.name;
			  
			  this.isactiveMeituan = res.data.platformMeituan;
			  this.isactiveEleme = res.data.platformEleme;
			  this.isactiveCustom = res.data.platformCustom;
			  if(this.isactiveEleme==1){
			  	this.settings[2].value = true;
			  }else{
			  	this.settings[2].value = false;
			  }
			  if(this.isactiveMeituan==1){
			  	this.settings[3].value = true;
			  }else{
			  	this.settings[3].value = false;
			  }
			  if(this.isactiveMeituan==1){
			  	this.settings[4].value = true;
			  }else{
			  	this.settings[4].value = false;
			  }
			  
            },
            fail: reject
          });
        });
        console.log('POST 请求成功:', id);
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('POST 请求失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      }
    },
    enableLottery(index,item) {
      this.settings[index].value = !this.settings[index].value;
	  if(item.value){
		  return item.revalue=1;
	  }
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.tempFilePath = tempFilePaths[0];
          this.uploadImage();
        }
      });
    },
    uploadImage() {
      if (!this.tempFilePath) {
        uni.showToast({
          title: '没有选择图片',
          icon: 'none'
        });
        return;
      }
      uni.uploadFile({
        url: 'http://zhaoyang.nat300.top/store/find',
        filePath: this.tempFilePath,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadRes) => {
          console.log('上传成功:', uploadRes.data);
          uni.showToast({
            title: '上传成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          console.error('上传失败:', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          });
        }
      });
    },
    toggleEditMode(item) {
      item.editable = !item.editable;
      if (item.editable) {
        item.tempValue = item.value;
      }
    },
    saveEdit(item) {
      item.value = item.tempValue;
      item.editable = false;
    },
    handleButtonClick(item) {
      uni.showToast({
        title: `${item.title}已点击`,
        icon: 'none'
      });
    },
    async saveAllSettings() {
      try {
        const response = await new Promise((resolve, reject) => {
          uni.request({
            url: 'http://zhaoyang.nat300.top/store/update1',
            method: 'POST',
            data: {
              storeId: this.storeId,
              avatar: this.settings[0].value,
              name: this.settings[1].tempValue,
              eleme: this.settings[2].revalue,
              meituan: this.settings[3].revalue,
              custom: this.settings[4].revalue,
            },
            header: {
              'content-type': 'application/json'
            },
            success: (res) => {
              console.log(res.data);
              this.storeId = res.data.id;
              console.log(this.storeId);
            },
            fail: reject
          });
        });
        console.log('POST 请求成功');
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
      } catch (error) {
        console.error('POST 请求失败:', error);
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        });
      }
      uni.showToast({
        title: '保存成功',
        icon: 'success',
        duration: 2000
      });
    }
  }
};
</script>

<style>
.store-settings {
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin-top: 5px;
}

.setting-item {
  border-bottom: 1px solid #eaeaea;
  padding: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: bold;
  padding: 5px;
  border-radius: 4px;
  margin-right: 10px;
  align-self: flex-start;
  margin-top: 0px;
}

.content {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

button {
  background-color: #007bff;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  margin-left: 8px;
}

.action-buttons {
  display: flex;
  align-items: center;
  margin-left: 170px;
  flex-direction: column;
}

button + button {
  margin-left: 8px;
}

.action-buttons button {
  background-color: #007bff;
  color: white;
  padding: 1px 10px;
  border: none;
  border-radius: 10px;
  transition: transform 0.2s;
}

.save-store-info {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
}
</style>